<template>
  <div class="app-container">
    <p>スタートボタンを押して，はじめてください</p>
    <button @click="startToGame">Listening</button>
    <button @click="toSpeaking">Speaking</button>
  </div>
</template>
<script>
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import router from "../../router/index"
import { localGet,localSet } from '../../utils'
import AnswerList from '../../assets/answerList.json'
export default defineComponent({
  setup() {
    const state=reactive({})
    onMounted(()=>{
      loadArray()
    })
    const loadArray=()=>{
      let array=AnswerList.data
      array=randomMethod(array,array.length)
      localSet("questionList",array||[])
    }
    const randomMethod=(list,n=10)=>{
      let array=[]
      let count=n
      while(count>0){
        const idx=Math.floor(Math.random()*count)
        if(idx!==count-1){
          [list[count-1],list[idx]]=[list[idx],list[count-1]]
        }
        array.push(list[count-1])
        count--
      }
      return array
    }
    const startToGame=()=>{
      localSet("listenList",[])
      window.localStorage.setItem("type","listening")
      window.localStorage.setItem("dataItem",0)
      router.push({path: '/choose'})
    }
    const toSpeaking=()=>{
      localSet("listenList",[])
      window.localStorage.setItem("type","speaking")
      window.localStorage.setItem("dataItem",0)
      router.push("/speaking")
    }
    
    return {
      startToGame,
      ...toRefs(state),
      toSpeaking,
      loadArray
    }
  },
})
</script>

<style scoped>
.app-container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
</style>